<template>
  <div class="user-status" :class="{ 'user-status--loading': isLoading }">
    <!-- 加载状态 -->
    <el-skeleton v-if="isLoading" animated>
      <template #template>
        <div class="user-status__loading">
          <el-skeleton-item variant="circle" style="width: 32px; height: 32px;" />
          <el-skeleton-item variant="text" style="width: 60px; height: 20px;" />
        </div>
      </template>
    </el-skeleton>

    <!-- 未登录状态 -->
    <div v-else-if="!isAuthenticated" class="user-status__guest">
      <div class="user-status__login-btn" @click="showLoginModal">
        <el-icon><UserIcon /></el-icon>
        <span>登录</span>
      </div>
      <ThemeSwitcher />
    </div>

    <!-- 已登录状态 -->
    <div v-else class="user-status__authenticated">
      <!-- 主题切换器 -->
      <ThemeSwitcher />
      
      <!-- 用户信息 -->
      <el-dropdown @command="handleMenuCommand" trigger="click">
        <div class="user-status__info">
          <el-avatar 
            :size="32" 
            class="user-status__avatar"
          >
            <el-icon><UserIcon /></el-icon>
          </el-avatar>
          <div class="user-status__details">
            <div class="user-status__name">{{ fullName }}</div>
          </div>
          <el-icon class="user-status__arrow"><ArrowDown /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">
              <el-icon><UserFilled /></el-icon>
              个人资料
            </el-dropdown-item>
            <el-dropdown-item command="family">
              <el-icon><User /></el-icon>
              成员管理
            </el-dropdown-item>
            <el-dropdown-item command="settings">
              <el-icon><Setting /></el-icon>
              设置
            </el-dropdown-item>
            <el-dropdown-item divided command="logout">
              <el-icon><SwitchButton /></el-icon>
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useAuthStore } from "@/stores/auth";
import { User as UserIcon, ArrowDown, UserFilled, Setting, SwitchButton, User } from "@element-plus/icons-vue";
import ThemeSwitcher from "./ThemeSwitcher.vue";

// 获取认证状态管理器
const authStore = useAuthStore();

// 计算属性
const isLoading = computed(() => authStore.isLoading);
const isAuthenticated = computed(() => authStore.isAuthenticated);
const fullName = computed(() => authStore.fullName);

// 显示登录模态框
const showLoginModal = () => {
  // 触发显示登录模态框的事件
  const event = new CustomEvent("show-login-modal");
  window.dispatchEvent(event);
};

// 处理下拉菜单命令
const handleMenuCommand = async (command: string) => {
  switch (command) {
    case "profile":
      console.log("打开个人资料");
      break;
    case "family":
      // 触发打开家庭成员管理窗口的事件
      const familyApp = {
        id: "family",
        name: "家庭成员管理",
        icon: "👨‍👩‍👧‍👦",
        requiresAuth: true
      };
      const event = new CustomEvent("open-family-window", { detail: familyApp });
      window.dispatchEvent(event);
      break;
    case "settings":
      console.log("打开设置");
      break;
    case "logout":
      try {
        await authStore.logout();
        console.log("退出登录成功");
      } catch (error) {
        console.error("退出登录失败:", error);
      }
      break;
  }
};
</script>

<style lang="scss" scoped>
@use "../styles/variables" as *;
@use "../styles/mixins" as *;

.user-status {
  position: relative;
  height: 40px;
  z-index: 1;
  display: flex;
  align-items: center;
  font-size: 13px;
  user-select: none;
  -webkit-user-select: none;
}

.user-status--loading {
  opacity: 0.7;
  pointer-events: none;
}

/* 加载状态 */
.user-status__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: 4px;
}

/* 未登录状态 */
.user-status__guest {
  display: flex;
  align-items: center;
  height: 40px;
  gap: 8px;
}

/* 登录按钮 */
.user-status__login-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  color: var(--el-text-color-regular);

  &:hover {
    background-color: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
  }

  .el-icon {
    font-size: 14px;
  }
}

/* 已登录状态 */
.user-status__authenticated {
  display: flex;
  align-items: center;
  height: 40px;
  position: relative;
  gap: 8px;
}

/* 用户信息 */
.user-status__info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  height: 40px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background-color: var(--el-color-primary-light-9);
  }
}

.user-status__details {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.user-status__name {
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-status__arrow {
  font-size: 12px;
}

</style>
